
import styles from './styles.module.less';
import React, { useState, FC, useEffect } from 'react';

interface EmptyProps {
  imgUrl?: string;
  text?: string;
  isError?: boolean;
  reload?: Function;
  reloadText?: string;
}

const Empty: FC<EmptyProps> = (props) => {
  const { isError, reloadText = '重新加载' } = props;

  const defaultImgUrl = props.imgUrl || (isError ? require('@/assets/images/404.png') : require('@/assets/images/no-data.png'));
  const defaultText = props.text || (isError ? '发生错误' : '暂无数据');

  const [imgUrl, setImgUrl] = useState<string>(defaultImgUrl);
  const [text, setText] = useState<string>(defaultText);

  useEffect(() => {
    setImgUrl(props.imgUrl || defaultImgUrl);
    setText(props.text || defaultText);
  }, [props.imgUrl, props.text]);

  return (
    <div className={styles['page-empty']}>
      <img src={imgUrl} alt="" />
      <div className={styles['empty-text']}>{text}</div>
      {
        isError && (
          <a className={styles['empty-btn']} onClick={() => props.reload && props.reload()}>{reloadText}</a>
        )
      }
    </div>
  );
};

export default Empty;